<template>
    <el-select
        v-model="currentStatus"
        clearable
        style="width: 240px"
        :disabled="disabled"
        @change="handleChangeStatus"
    >
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>
<script>

import {findRowInListFromAttrName, isNullOrUndefined, safeGet} from "../../../core";

export default {
    name: "SksStatusSelect",
    components: {
    },
    props: {
        // value: [String, Number],
        disabled:{
            type:Boolean,
            default:false
        },
        //form表单数据
        formData: [Object],
        //属性名
        propName: [String],
        /**
         * 状态开关类型
         * 1: 归档开关
         * 2: 禁用开关
         * 3: 是否生效开关
         * 4: 是否提交  已提交/未提交
         * 5: 是否完结  已完结/未完结
         */
        type:{
            type:[Number,String],
            default: 1
        },
        /**
         * 数组头部插入选项
         * :unshiftOptionList="[{value:'',label:'全部'}]"
         */
        unshiftOptionList:[Array],
    },
    data() {
        return {
            defaultStatus:undefined,
            //字符类型
            currentStatus:this.defaultStatus,
            // 状态类型字典
            statusOptions: [],
        }
    },
    computed: {
        size() {
            return 0
        }
    },
    created() {
        this.initComponents();
    },
    mounted() {
        this.initComponents();
    },
    watch: {
        type:{
            handler(val) {
                this.initSwitchActiveValue();
            },
            immediate: true,
        },
        // value: {
        //     handler(val) {
        //         console.log("val != this.currentValue",val != this.currentStatus)
        //         if (val != this.currentStatus) {
        //             if(val === null||val===undefined){
        //                 this.currentStatus=val
        //             }else{
        //                 this.currentStatus= (val+'');
        //             }
        //
        //         }
        //         console.log("StatusSelect.watch.value",val,"currentValue",this.currentStatus)
        //     },
        //     immediate: true,
        // },
        formData: {
            handler(val) {
                console.log(`watch.formData.${this.propName}=`,safeGet(this.form,this.propName),val)
                this.watchFormDataPropNameValue()
            },
            immediate: true,
            deep: true,
        },
        unshiftOptionList:{
            handler(val) {
                this.initSwitchActiveValue();
            },
            immediate: true,
        },
    },
    methods: {
        initComponents(){
            // console.log("initComponents")
        },
        initSwitchActiveValue(){
            let statusOptions=[]
            if (this.type == 1) {
                statusOptions = [
                    {
                        value: '0',
                        label: '未归档'
                    },
                    {
                        value: '1',
                        label: '已归档'
                    },
                ]
            }else if (this.type == 2) {
                statusOptions=[
                    {
                        value: '0',
                        label: '启用'
                    },
                    {
                        value: '1',
                        label: '禁用'
                    },
                ]
            }else if (this.type == 3) {
                statusOptions=[
                    {
                        value: '0',
                        label: '已生效'
                    },
                    {
                        value: '1',
                        label: '未生效'
                    },
                ]
            }else if (this.type == 4) {
                statusOptions=[
                    {
                        value: '0',
                        label: '已提交'
                    },
                    {
                        value: '1',
                        label: '未提交'
                    },
                ]
            }else if (this.type == 5) {
                statusOptions=[
                    {
                        value: '0',
                        label: '未完结'
                    },
                    {
                        value: '1',
                        label: '已完结'
                    },
                ]
            } else {
                statusOptions=[
                    {
                        value: '0',
                        label: '完成'
                    },
                    {
                        value: '1',
                        label: '未完成'
                    },
                ]
            }
            if (!isNullOrUndefined(this.unshiftOptionList)) {
                for (let unshiftOption of this.unshiftOptionList) {
                    statusOptions.unshift(unshiftOption)
                }
            }
            this.statusOptions=statusOptions
        },
        watchFormDataPropNameValue() {
            //console.log(`formData.watchValue.`, this.formData, `[${this.propName}]`)
            if (isNullOrUndefined(this.formData)) {
                this.watchValue(undefined)
                return
            }
            if (isNullOrUndefined(this.propName)) {
                this.watchValue(undefined)
                return
            }
            //console.log(`watchValue.`, this.formData, `[${this.propName}]${this.formData[this.propName]}`)
            this.watchValue(this.formData[this.propName])
        },
        watchValue(val) {
            console.log("val != this.currentValue",val != this.currentStatus)
            if (val != this.currentStatus) {
                if(val === null||val===undefined){
                    this.currentStatus=val
                }else{
                    this.currentStatus= (val+'');
                }
                this.updateValue()
            }
            console.log("StatusSelect.watch.value",val,"currentValue",this.currentStatus)
        },
        handleChangeStatus(val){
            let row = {}
            // if (this.currentStatus === '') {
            //     this.currentStatus = undefined
            // }
            if (!isNullOrUndefined(this.currentStatus)) {
                row = findRowInListFromAttrName(this.statusOptions, this.optionKey, this.currentStatus);
            }
            if (isNullOrUndefined(row)) {
                row = {}
            }
            let oldVal=undefined
            if (!isNullOrUndefined(this.formData) && !isNullOrUndefined(this.propName)) {
                oldVal=this.formData[this.propName]
            }
            //更新前触发selected
            this.$emit('selected', null, this.currentStatus,oldVal)
            this.updateValue(this.currentStatus)
        },
        updateValue(newVal = this.currentStatus) {
            // console.log("sksSelectSingleByLookupService.updateValue",this.formData,this.propName,newVal)
            let oldVal=undefined
            if (!isNullOrUndefined(this.formData) && !isNullOrUndefined(this.propName)) {
                oldVal=this.formData[this.propName]
                this.formData[this.propName] = newVal
            }
            if (!isNullOrUndefined(newVal)) {
                this.$emit('clearValidate', this.propName)
                // this.formRef?.clearValidate(this.propName)
                // setTimeout(()=>{
                //     this.formRef?.clearValidate(this.propName)
                // },500)
            }
            this.$emit("input", {newVal,oldVal});
            this.$emit("change", {newVal,oldVal});

        },
    }

}
</script>


<style lange='less' scoped>
</style>

<!--
                <SksStatusSelect
                  v-if="isSystem"
                  v-model="queryParams.status"
                  :type="1"
                  @keyup.enter.native="handleQuery" >
                </SksStatusSelect>

-->
